import React from 'react'
import ReactDOM from 'react-dom'

class Xiong extends React.Component {
  // 接收参数
  constructor(props) {
    super(props)
    this.state = {
      isXiong: false,
      date: new Date()
    }
  }
  render () {
    if (this.state.isXiong) {
      return (
        <div>
          111
        </div>
      )
    } else {
      return (
        <div>
          <button onClick={this.arrTest}>小动物们都有谁呀</button>
          <span>{this.state.date.toLocaleTimeString()}</span>
        </div>
      )
    }
  }
  arrTest = () => {
    const animal = ['小兔子', '小熊', '小恐龙']
    animal.forEach((item) => {
      console.log(item)
    })
    console.log(this.props.name)
    this.setState({
      date: new Date()
    })
  }
  tick () {
    this.setState({
      date: new Date()
    })
  }
  componentWillMount () {
    console.log('componentWillMount组件将要渲染')
  }
  componentDidMount () {
    console.log('componentDidMount组件渲染完毕')
    // this.timeID = setInterval(() => this.tick(), 1000)
  }
  shouldComponentUpdate () {
    return true
  }
  componentWillReceiveProps () {
    console.log('componentWillReceiveProps组件将要接收新的state和props')
  }
  componentWillUpdate () {
    console.log('componentWillUpdate组件将要更新')
  }
  componentDidUpdate () {
    console.log('componentDidUpdate组件更新完毕')
  }
  componentWillUnmount () {
    console.log('componentWillUnmount移除')
  }
}

class Juan extends React.Component {
  constructor(props) {
    super(props)
    this.state = {

    }
  }
  render () {
    return (
      <div>
        <Xiong name="xiaotuzi" />
      </div>
    )
  }
}
ReactDOM.render(<Juan />, document.getElementById('root'))
